<?php 
use backend\models\GrpClass;
use backend\models\GrpImageType;
use yii\helpers\Url;
use backend\models\PrfType;
use yii\widgets\ActiveForm;
use yii\helpers\Html;
use backend\assets\FontawesomeAsset;
use backend\models\GrpSpace;

FontawesomeAsset::register($this);
$this->title =  '套装管理';
$img_tag = isset($_GET['tag'])?$_GET['tag']:'img_id';
$previous = Url::previous();


?>
	<link rel="stylesheet" type="text/css" class="library" href="tree_depends/bootstrap-2.2.1.min.css">
	<script type="text/javascript" class="library" src="tree_depends/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" class="library" src="tree_depends/bootstrap-2.2.1.min.js"></script>
<script type="text/javascript">
<!--

var curPage = 1;
var total,pagesize,totalPage;
var img_type_click;
var img_tag;

var have_sid_list ="<?php echo $_GET['tz_img_list']?>";
var tz_id_array = new Array();
if(have_sid_list.length != 0){
	var tz_id_array = have_sid_list.split(',');
}
//获取当前页数据
function getData(page,search,tag){
	img_type_click = search;
	img_tag = tag;
	
	$.ajax({
		//type: "POST",
		url: 'index.php?r=taozhuang/show-tz-image',
		data: {"page":page-1,"search":search,"tag":tag,"pageSize":6,"tz_img_list":"<?php echo $_GET['tz_img_list']?>"},
		dataType: 'json',
		beforeSend:function(){
			$("#list ul").append("<li id='loading'>loading...</li>");
			},
		success:function(json){
			//alert(json);
			$("#list ul").empty(); //清空数据区
			total = json.total; //总记录数
			pageSize = json.pageSize;//每页显示条数
			curPage = page;//当前页
			totalPage = json.totalPage;//总页数
			var li ="";
			if( json.list != "" )
			{
				var list = json.list;
				var have;
				$.each(list,function(index,array){
					var lii = "";
					if(tz_id_array.length !=0){
						for(var i=0;i<tz_id_array.length;i++){
							//alert(tz_id_array[i]);
							if(tz_id_array[i] == array['sid'])
							{			
								//alert(tz_id_array[i]);	
								lii = "<li><input type='checkbox'  checked='checked' onclick='select_img(this," + array['sid'] + ")' name='tz_id' value='" + array['sid'] + "' /><img src='" + array['url'] +"' height='" + array['height'] +"' width='" + array['width'] + "'>" + array['sid'] + array['name']+"<br/>_"+array['height']+"X"+array['width']+"</li>";	
								break;
							}
							else
							{
								lii = "<li><input type='checkbox' onclick='select_img(this," + array['sid'] + ")' name='tz_id' value='" + array['sid'] + "' /><img src='" + array['url'] +"' height='" + array['height'] +"' width='" + array['width'] + "'>" + array['sid'] + array['name']+"<br/>_"+array['height']+"X"+array['width']+"</li>";							
							}
						}
					}
					else{
						lii = "<li><input type='checkbox' onclick='select_img(this," + array['sid'] + ")' name='tz_id' value='" + array['sid'] + "' /><img src='" + array['url'] +"' height='" + array['height'] +"' width='" + array['width'] + "'>" + array['sid'] + array['name']+"<br/>_"+array['height']+"X"+array['width']+"</li>";	
					}
					li += lii;
					have = array['url'];
					});
					if(have.length != 0){
						$("#list ul").append(li);
					}

			}
			else{
				$("#list ul").append("<li>暂无图片</li>");
				}
			},
		
		complete:function(){
				getPageBar();
			},
		error:function(){
				alert("数据加载失败");
			},
		});
}

function getPageBar(){
	//页码大于最大页数，确认当前页
	if(curPage > totalPage) curPage=totalPage;
	//页码小于1，确认当前页
	if(curPage<1) curPage = 1;
	
	pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
	
	//如果是第一页
	if(curPage ==1){
		pageStr += "<span>首页</span><span>上一页</span>";
	}else{
		pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"; 
	}
	
	//如果是最后页
	if(curPage>=totalPage){ 
    	pageStr += "<span>下一页</span><span>尾页</span></div>"; 
  	}else{ 
    	pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a> </span>"; 
  } 
      
  $("#pagecount").html(pageStr); 

}

//打开页面，第一次加载
$(function(){
  getData(1,<?=$_GET['space_id'] ?>,'type'); 
  $("#pagecount span a").live('click',function(){ 
    var rel = $(this).attr("rel"); 
    if(rel){ 
      getData(rel,img_type_click,img_tag); 
    } 
  }); 
  
}); 

function show(id)
{
	$("#upload_img"+id).css("display","inline");
}
function hide(id)
{
	$("#upload_img"+id).css("display","none");
}


function select_img(obj,tz_id)
{
	if(obj.checked)
	{
		if(tz_id_array.length >= 3){
			alert('最多只能选择3张套装');
			obj.checked=false;
			
		}else{

			tz_id_array.push(tz_id);
			}
		//for(var i=0;i<tz_id_array.length;i++){
		//alert(tz_id_array[i]);
		//}
	}
	else
	{
		for(var i=0;i<tz_id_array.length;i++){
		    if(tz_id_array[i] == tz_id){
		    	tz_id_array.splice(i,1);//从下标为i的元素开始，连续删除1个元素
		        i--;//因为删除下标为i的元素后，该位置又被新的元素所占据，所以要重新检测该位置
		       
		    }
		 //   alert(tz_id_array[i]);
		}
	}
}
function haved_select_img(){
	//if(tz_id_array.length<1){
	//	alert('你还没有选择套装');
	//	}

		$.ajax({
			//type: "POST",
			traditional: true,
			//url: 'index.php?r=taozhuang/write-tz-to-cookie',
			url: 'index.php?r=taozhuang/add-sid-to-buildtype',
			data: {"arr_tz[]":tz_id_array,"b_type_id":<?php echo $_GET['type_id']?>},
			dataType: 'json',
			beforeSend:function(){
				//$("#list ul").append("<li id='loading'>loading...</li>");
				},
			success:function(data){
				//alert('您已选择套装');
				},
			
			complete:function(){
				opener.location.reload();
				window.close();
				},
			error:function(){
				//	alert("数据加载失败");
				},
			});
	
}
/*
function check_img(obj,id)
{
	if(obj.checked)
	{
		//alert(id);
		$("#upload_img"+id).css("display","inline");
	}
	else
	{
		$("#upload_img"+id).css("display","none");
	}
}
 */
//-->
</script>

<body>


<?php $url = "index.php?r=image/upload-image&type_id="; ?>
	<div class="tree well" style='float:left;width:20%;'>
	
		
		<ul>
			<li><span><i class="icon-folder-open"></i>选择套装</span>
		<?php 
		foreach ($tz_space as $value)
		{ ?>
			<ul>
				<li>
					<span>
						<i class="icon-plus-sign"></i>
						<a href="#" onclick="getData(1,<?=$value->id ?>,'type')"><?=$value->name ?></a>
						
					</span>
					
				</li>
			</ul>
		<?php }?>		
		</li>
	</ul>

	
	<hr/>

</div>

<div style='border:1px solid #ccc;'>

	<div>
		<span style='text-align:right;'><?=Html::textInput('search_image','',['id'=>'search_value','style'=>'width:50%;margin-top:10px;','placeholder'=>'图片名称']) ?>
			<?=Html::button('搜索图片',['onclick' => 'javascript:getData(1,$("#search_value").val(),"name")','class'=>'btn','style'=>'']) ?>
		</span>
		<button id="hide_test_image" class='btn' onclick="haved_select_img()">选中套装</button>
	</div>

	<div id="test_image" style="display:none;">
	<?php 		
		foreach (PrfType::findAll(['father'=>-1]) as $value)
		{ ?>	
				<span style='display: inline;padding:2px;'>
					<a href="#" onclick="getData(1,<?=$value->id?>,'type')"><span><i class="icon-folder-open"></i><?=$value->typename ?></span>
					</a>
				</span>
			
		<?php }?>

	</div>
</div>

<div id="list" style="text-align: center;">
	<ul>
	</ul>
</div>

<div id="pagecount"></div>



</body>

    	<style type="text/css">.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:0px 5px 0px 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:1px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}


<!--list的-->
#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{display:inline-block;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center;} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} 


ul{list-style:none;}

</style>
    	
	    		<script>$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});</script>
	
<!-- Generated by RunJS (Mon Nov 30 11:35:25 CST 2015) 0ms -->